<template>
  <div>
    <el-input
      style="width: 200px; float: left; margin-left: 20px"
      size="small"
      placeholder="请输入分院或专业名称"
      v-model="name"
    />
    <el-select
      style="float: left; margin-left: 15px"
      size="small"
      v-model="enabled"
      clearable
      placeholder="请选择分院或专业状态"
    >
      <el-option
        v-for="item in options"
        :key="item[0]"
        :label="item[0]"
        :value="item[1]"
      >
      </el-option>
    </el-select>
    <el-button
      style="float: left; margin-left: 15px; margin-bottom: 10px"
      icon="el-icon-search"
      size="small"
      type="primary"
      @click="searchCollege"
      >搜索</el-button
    >
    <el-button
      style="float: left; margin-left: 15px; margin-bottom: 10px"
      icon="el-icon-refresh"
      size="small"
      @click="clearInput"
      >重置</el-button
    >
    <el-table
      :data="tableData"
      row-key="id"
      :cell-style="rowClass"
      :header-cell-style="headClass"
      :default-expand-all="true"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        prop="name"
        label="专业名称"
        width="400"
      ></el-table-column>
      <el-table-column prop="enabled" label="是否启用" width="200">
        <template slot-scope="scope">
          <el-switch
            v-if="scope.row.enabled"
            v-model="scope.row.enabled"
            @change="changeEnabled(scope.row.id, scope.row.name)"
          ></el-switch>
          <el-switch
            v-else
            v-model="scope.row.enabled"
            @change="changeDisable(scope.row.id)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="show(scope.row)"
            >新增</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="添加分院或专业"
      :visible.sync="dialogVisible"
      width="400px"
      center
    >
      <el-form
        :model="formData"
        ref="registerForm"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item prop="parentName" label="父级学院">
          <el-input
            disabled
            v-model="formData.parentName"
            placeholder="请输入分院或专业名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="name" label="专业名称">
          <el-input
            v-model="formData.name"
            placeholder="请输入分院或专业名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
        <el-button size="small" type="primary" @click="addCollege"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="修改分院或专业"
      :visible.sync="editDialogVisible"
      width="400px"
      center
    >
      <el-form
        :model="editData"
        ref="editForm"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item
          v-if="this.editData.id != 1"
          prop="parentId"
          label="父级学院"
        >
          <treeselect
            v-model="editData.parentId"
            :options="parentData"
            :normalizer="normalizer"
            placeholder="选择父级学院"
          />
        </el-form-item>
        <el-form-item prop="name" label="专业名称">
          <el-input
            v-model="editData.name"
            placeholder="请输入分院或专业名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="small" @click="editDialogVisible = false"
          >取消</el-button
        >
        <el-button size="small" type="primary" @click="updateCollege"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: { Treeselect },
  data() {
    return {
      name: "",
      options: [
        ["启用", true],
        ["禁用", false],
      ],
      enabled: "",
      tableData: [],
      parentData: [],
      dialogVisible: false,
      editDialogVisible: false,
      formData: {
        name: null,
        parentName: null,
        parentId: null,
      },
      editData: {
        id: null,
        name: null,
        parentId: null,
      },
      rules: {
        name: [
          { required: true, message: "请输入分院或专业名称", trigger: "blur" },
        ],
        parentId: [
          { required: true, message: "请选择父级学院", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.initCollege();
  },
  methods: {
    //转换学院数据格式
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },
    clearInput() {
      location.reload();
    },
    show(row) {
      this.formData = { parentName: row.name, parentId: row.id };
      this.dialogVisible = true;
    },
    handleUpdate(row) {
      this.editData.id = row.id;
      this.editData.name = row.name;
      this.editData.parentId = row.parentId;
      this.editData.enabled = row.enabled;
      this.editDialogVisible = true;
    },
    rowClass() {
      return "text-align: center;";
    },
    headClass() {
      return "text-align: center;background:#f8f8f9;";
    },
    searchCollege() {
      this.$get(
        "college/search?name=" + this.name + "&enabled=" + this.enabled
      ).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data;
          this.parentData = res.data;
        }
      });
    },
    updateCollege() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          if (this.editData.parentId == -1) {
            this.$put("college/", this.editData).then((res) => {
              if (res.code == 200) {
                this.initCollege();
                this.editDialogVisible = false;
              }
            });
            return;
          }
          this.$put("college/update", this.editData).then((res) => {
            if (res.code == 200) {
              this.initCollege();
              this.editDialogVisible = false;
            }
          });
        } else {
          this.$message.error("数据校验失败，请检查");
        }
      });
    },
    addCollege() {
      this.$refs["registerForm"].validate((valid) => {
        if (valid) {
          this.$post("college/", this.formData).then((res) => {
            if (res.code == 200) {
              this.initCollege();
              this.dialogVisible = false;
            }
          });
        } else {
          this.$message.error("数据校验失败，请检查");
        }
      });
    },
    initCollege() {
      this.$get("college/").then((res) => {
        if (res.code == 200 && res.data) {
          this.tableData = res.data;
          this.parentData = res.data;
        }
      });
    },
    handleDelete(row) {
      this.$confirm('此操作将删除"' + row.name + '", 是否继续?', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$delete("college/" + row.id).then((res) => {
          if (res.code == 200) {
            this.initCollege();
          }
        });
      });
    },
    changeEnabled(id, name) {
      this.$confirm("确定要" + '"停用"' + '"' + name + '"吗？', "系统提示", {
        confirmButtonText: "确定·",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$put("college/", { id: id, enabled: false }).then((res) => {
            if (res.code == 200) {
              this.initCollege();
            }
          });
        })
        .catch(() => {
          this.initCollege();
        });
    },
    changeDisable(id) {
      this.$put("college/", { id: id, enabled: true }).then((res) => {
        if (res.code == 200) {
          this.initCollege();
        }
      });
    },
  },
};
</script>

<style>
</style>